<template>
  <el-cascader :disabled="disabled" placeholder="请选择地区" filterable :clearable="true" :options="regionTree" :props="props"
    @change="handleItemChange" @focus.once="hanldeItemFocus" v-model="streetIds">
  </el-cascader>
</template>

<script>
import regionData from "./regionData.json"
import { cloneDeep } from "lodash-es";
export default {
  props: {
    disabled:{
      type:Boolean,
      default:false,
    },
    streetValues: {
      type: Array,
      default: () => []
    },
    isChangeOnSelect: {
      type: Boolean,
      default: () => false
    },
    index: {
      type: Number,
    },
    type: {
      type: Number,
    }

  },
  data() {
    return {
      regionTree: [],
      flag: true,
      props: {
        checkStrictly: this.isChangeOnSelect
      },
      streetIds: []
    }
  },
  mounted() {

  },
  watch: {
    streetValues: {
      handler(curVal) {
        if (curVal.some(item => item)) {
          curVal = curVal.filter(item => item) //先把空的字符串去掉
          this.streetIds = curVal.filter(item => item && typeof item == "number"); //过滤获取地区id,
          this.regionNames = curVal.filter(item => item && typeof item == "string");//过滤获取地区名字

          // 如果有地区名字传过来那么就用名字和id作为cascader的options，这个是在编辑的时候用的
          // 在编辑的时候需要展示地区数据，所有要通过传过来的id和名字组成options，这段代码只会执行一次，所以通过flag来
          // 只执行一次
          if (this.regionNames.length > 0 && this.flag) {
            this.streetIds.forEach((item, index) => {
              this.arrToTree(this.regionTree, { value: item, label: this.regionNames[index] })
            })

            this.flag = false
          }
        } else {
          this.streetIds = []
        }
      },
      immediate:true
    }


  },
  methods: {
    hanldeItemFocus() {
      // 开启定时，获取数据，否则下拉会卡顿一下才显示出来
      setTimeout(item => {
        this.regionTree = cloneDeep(regionData.data)
        this.removeChildren(this.regionTree);
      }, 150)
    },
    // 父组件传过来的值通过调用这个方法来格式化成cascader组件的options
    arrToTree(arr, obj) {
      if (arr.length == 0) {
        arr.push(obj)
      } else if (!arr[0].children) {
        arr[0].children = []
        arr[0].children.push(obj)
      } else {
        this.arrToTree(arr[0].children, obj)
      }
    },

    removeChildren(regions) {
      if (regions.children) {
        for (let i = 0, len = regions.length; i < len; i++) {
          if (regions[i].children.length === 0) {
            delete regions[i].children;
          } else {
            this.removeChildren(regions[i].children)
          }
        }
      }
    },
    handleItemChange(val) {
      var cityValue = ""
      var areaValue = ""
      var streetValue = ""
      var levels = "" //选到第几级
      let province = this.regionTree.filter(item => {
        return item.value == val[0]
      })
      if (province.length > 0) {
        levels = 1
      }
      if (val[1]) {
        levels = 2
        let city = province[0].children.filter(item => {
          return item.value == val[1];
        })
        cityValue = city[0].label
        if (val[2]) {
          levels = 3
          let area = city[0].children.filter(item => {
            return item.value == val[2];
          })
          areaValue = area[0].label
          if (val[3]) {
            levels = 4
            let street = area[0].children.filter(item => {
              return item.value == val[3];
            })
            streetValue = street[0].label
          }
        }
      }

      let param = {
        provinceId: val[0] ? val[0] : '',
        provinceName: province.length > 0 ? province[0].label : '',
        cityId: val[1] ? val[1] : "",
        cityName: cityValue,
        areaId: val[2] ? val[2] : "",
        areaName: areaValue,
        streetId: val[3] ? val[3] : "",
        streetName: streetValue,
        levels: levels
      }

      if (this.index || this.index == 0) {
        param.index = this.index //如果父组件传过来索引那么就传回去
      }
      if (this.type) {
        param.type = this.type //如果父组件传过来索引那么就传回去
      }
      this.$emit("regionChange", param);
    },

    // 父组件调用该函数可以清楚改组件数据(自定义属性streetValues传值也可以)
    clearStreetIds() {
      this.streetIds = []
      this.handleItemChange(this.streetIds)

    }

  },

}
</script>
